<template>
  <div class="map-page">
    <img class="img-bg" src="@/assets/cockpit/subdivision/co-map-2.jpg" alt="" />
    <div class="map-left-menu">
      <div class="co-title-select">
        <el-select v-model="selectedValue" placeholder="请选择" :popper-append-to-body="false">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
        </el-select>
      </div>
      <!-- <ul class="co-menu-list">
        <li v-for="item in menuList" :key="item.id">{{ item.name }}</li>
      </ul> -->
    </div>

    <div class="map-left-bottom">
      <div class="title-style">
        图例
      </div>
      <ul class="logo-list">
        <!-- <li v-for="(item, index) in logoList" :key="index"> -->
        <li v-for="(item, index) in logoList" :key="index">
          <img :src="require('@/assets/cockpit/subdivision/' + item.value + '.png')" alt="" />
          <!-- <P>轨道3号线</P> -->
          <p>{{ item.label }}</p>
        </li>
      </ul>
    </div>

    <div class="map-right-menu">
      <div class="list-header">
        <p>线路名称</p>
        <p>长度(公里)</p>
        <p>起讫点名称</p>
      </div>
      <ul class="list-item">
        <!--  -->
        <li v-for="(item, index) in 4" :key="index">
          <div class="name">
            长宁线
            <div class="before"></div>
          </div>
          <div class="length">36</div>
          <div class="des">宁乡高铁站-东方红路</div>
        </li>
        <div class="list-total">
          <p>小计</p>
          <p>187公里(共线段合计 15 里)</p>
        </div>
        <!--  -->
        <li v-for="(item, index) in 11" :key="index">
          <div class="name">
            长宁线
            <div class="before"></div>
          </div>
          <div class="length">36</div>
          <div class="des">宁乡高铁站-东方红路</div>
        </li>
        <div class="list-total">
          <p>小计</p>
          <p>187公里</p>
        </div>
      </ul>
    </div>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
import logoData from './logoData'

@Component({
  name: 'MapMenu',
  components: {}
})
export default class MapMenu extends Vue {
  private logoList = logoData
  private selectedValue = 1
  private options = [
    {
      value: 1,
      label: '城区'
    },
    {
      value: 2,
      label: '主体功能分区'
    },
    {
      value: 3,
      label: '一轴两带多中心支撑体系'
    },
    {
      value: 4,
      label: '重大交通基础设施规划'
    },
    {
      value: 5,
      label: '融城交通规划'
    }
  ]
}
</script>
<style lang="scss" scoped>
@import '~@/styles/cockpit.scss';
.map-page {
  width: 100%;
  height: 100%;
  background-color: #042c63;
  .img-bg {
    width: 100%;
    height: 100%;
    display: block;
  }

  .map-left-menu {
    position: absolute;
    left: 12px;
    top: 12px;
    .co-menu-list {
      width: 188.1px;
      height: 300.04px;
      background: rgba(0, 33, 96, 0.9);
      border: 1px solid #3767b6;
      margin-top: 12px;

      li {
        width: 164px;
        height: 29px;
        line-height: 29px;
        background: url('~@/assets/cockpit/co-title-select.png') no-repeat 0/ 100% 100%;
        border: none;
        font-size: 12px !important;
        color: #fff;
        padding-left: 8px;
        margin-top: 12px;
        margin-left: 12px;
      }
    }
  }

  .map-left-bottom {
    position: absolute;
    left: 8px;
    bottom: 6px;
    color: #fff;
    width: 382px;
    height: 268px;
    background: url('~@/assets/cockpit/subdivision/wq-logo-bg.png') no-repeat 0/ 100% 100%;
    .title-style {
      font-size: 14px !important;
      color: #fff;
      text-shadow: 0 0 4px #006aff;
      margin: 26px 0 0 20px;
    }
    .logo-list {
      margin: 12px;
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      margin: 12px 20px;
      li {
        display: flex;
        width: 32%;
        margin-bottom: 8px;
        img {
          width: 32px;
          height: 16px;
          display: block;
        }
        p {
          line-height: 16px;
          margin-left: 4px;
          font-size: 12px !important;
        }
      }
    }
  }

  .map-right-menu {
    position: absolute;
    right: 12px;
    bottom: 12px;
    color: #fff;
    width: 428px;
    height: 521px;
    background: url('~@/assets/cockpit/subdivision/co-map-menu-bg.png') no-repeat 0/ 100% 100%;
    .list-header {
      display: flex;
      width: 404px;
      height: 21px;
      line-height: 21px;
      background: rgba(255, 255, 255, 0.1);
      color: #bffeff;
      text-align: center;
      margin: auto;
      margin-top: 40px;

      p:nth-of-type(1) {
        flex: 1;
      }
      p:nth-of-type(2) {
        flex: 1;
      }
      p:nth-of-type(3) {
        flex: 2;
      }
    }
    .list-item {
      height: 440px;
      overflow: auto;
      .list-total {
        display: flex;
        width: 404px;
        height: 21px;
        line-height: 21px;
        background: rgba(255, 255, 255, 0.05);
        margin: auto;
        margin-top: 4px;
        text-align: center;
        color: #bffeff;
        p:nth-of-type(1) {
          flex: 1;
        }
        p:nth-of-type(2) {
          flex: 3;
        }
      }
      li {
        display: flex;
        width: 404px;
        height: 21px;
        line-height: 21px;
        background: rgba(255, 255, 255, 0.05);
        margin: auto;
        margin-top: 4px;
        text-align: center;

        .name {
          flex: 1;
          position: relative;
          .before {
            position: absolute;
            left: 0;
            top: 0;
            width: 4px;
            height: 21px;
            background: #006aff;
            opacity: 0.5;
            border-right: solid 2px #002160;
          }
        }
        .length {
          flex: 1;
        }
        .des {
          flex: 2;
        }
      }
    }
  }
}
</style>
